<template>
  <div class="details-header">
    <div class="icon-father"><img class="icon"
           :src="setIconImage"
           :style="setIconStyle" />
    </div>
    <div class="status">{{headerList[orderstatus] && headerList[orderstatus].text}}</div>
  </div>
</template>

<script>
import mixins from '@/mixins'
export default {
  mixins: [mixins],
  name: 'details-header',
  data () {
    return {
      headerList: []
    }
  },
  props: {
    orderstatus: {
      type: String,
      default: '0'
    }
  },
  watch: {
    orderstatus: {
      immediate: true,
      handler (value) {
        this.initObj(value)
      }
    }
  },
  computed: {
    setIconImage () {
      let obj = this.headerList[this.orderstatus]
      if (obj) {
        return this.setLocalImg(obj.imgUrl)
        // backgroundImage: this.setLocalImg(obj.imgUrl),
        // backgroundSize: `${obj.width / 100}rem ${obj.height / 100}rem`,
        // width: `${obj.width / 100}rem`,
        // height: `${obj.height / 100}rem`
      }
    },
    setIconStyle () {
      let obj = this.headerList[this.orderstatus]
      if (obj) {
        return {
          width: `${obj.width / 100}rem`,
          height: `${obj.height / 100}rem`
        }
      }
    }
  },
  methods: {
    initObj () {
      this.headerList = []
      this.spwanObj('icon-status-waitpay', '待付款', 31, 34)
      this.spwanObj('icon-status-waitdelivery', '待发货', 34, 31)
      this.spwanObj('icon-status-delivery', '已发货', 34, 27)
      this.spwanObj('icon-status-success', '已收货', 34, 34)
      this.spwanObj('icon-status-success', '已完成', 34, 34)
      this.spwanObj('icon-status-close', '已关闭', 34, 34)
    },
    spwanObj (imgUrl, text, width, height) {
      this.headerList.splice(this.headerList.length, 0, { imgUrl: imgUrl, text: text, width: width, height: height })
    }
  },
  mounted () {
    this.BIND_LOADING(false)
  }
}
</script>

<style lang="stylus" scoped>
.details-header {
  height: 90px;
  width: 100%;
  background: RGBA(77, 85, 97, 1);
  display: flex;
  align-items: center;
  padding-left: 20px;
  box-sizing: border-box;

  .icon-father {
    display: flex;
    align-items: center;
    height: 100%;

    .icon {
      margin-right: 20px;
      margin-top: 5px;
    }
  }

  .status {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 30px;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
